<template>
  <div>
    <PreloadImage />
    <PromptBox v-show="showPrompt" :promptMessage="promptMessage" />
    <main class="main" :class="{ blur: whetherBlur }">
      <el-alert
        :title="`请耐心等待⌛️，阅读即将于 ${READING_TIME} 开始`"
        type="success"
        :closable="false"
      >
      </el-alert>
      <div class="mask">
        <div class="title">
          <Trophy />
          悦读·宋庆龄
          <img src="../assets/k8s_deploy.jpg" />
        </div>
      </div>

      <section class="info-panel">
        <div class="content">
          <el-input placeholder="请输入姓名" v-model="name">
            <template #prefix>
              <el-icon class="el-input__icon"><User /></el-icon>
            </template>
          </el-input>
          <el-input placeholder="请输入手机号" v-model="mobile">
            <template #prefix>
              <el-icon class="el-input__icon"><Phone /></el-icon>
            </template>
          </el-input>
          <el-select v-model="team" placeholder="请选择团队">
            <el-option
              v-for="item in options"
              :key="item.teamId"
              :label="item.teamName"
              :value="item.teamId"
            >
            </el-option>
          </el-select>
          <p class="attention">个人参赛，请选择（无）否则取消参赛资格</p>
          <el-button round :disabled="flag" @click="submitUserInfo"
            >确认提交</el-button
          >
        </div>
      </section>
      <div class="help">
        <font-awesome-icon icon="question-circle" class="help-icon" />
        <router-link to="/rules">游戏规则</router-link>
      </div>
    </main>
    <router-view @showPromptBox="showPromptBox" />
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { User, Phone, Trophy } from "@element-plus/icons-vue";
import PromptBox from "@/components/PromptBox";
import PreloadImage from "@/components/PreloadImage";
import { SET_USER_INFO, GET_USER_INFO } from "@/store/mutation-types";
import { getTeamInfo, saveUserInfo } from "@/api";

export default {
  name: "HomePage",
  data() {
    return {
      name: "",
      mobile: "",
      options: [],
      team: undefined,
      flag: false, // 用于控制提交按钮是否disabled
      showPrompt: false,
      whetherBlur: false,
      promptMessage: "",
      trailerPrize: 0,
      messages: [],
    };
  },
  methods: {
    submitUserInfo() {
      if (
        !/^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/.test(
          this.mobile
        )
      ) {
        this.$message({ type: "warning", message: "手机号错误" });
        return;
      }
      saveUserInfo({
        username: this.name,
        mobile: this.mobile,
        teamId: this.team,
      }).then(({ data }) => {
        if (data.code === 0) {
          this.setUserInfo({
            username: this.name,
            mobile: this.mobile,
            teamId: this.team,
            userId: data.userId,
            token: data.token,
          });
          this.$message({ message: "报名登录成功" });
          if (
            this.READING_TIME === "" ||
            this.START_ANSWER_TIME === "" ||
            this.END_ANSWER_TIME === ""
          ) {
            this.$router.replace("/rules");
            return;
          }
          if (+Date.now() < +new Date(this.READING_TIME))
            this.$router.replace("/rules");
          else if (+Date.now() < +new Date(this.START_ANSWER_TIME))
            this.$router.replace("/read");
          else if (+Date.now() < +new Date(this.END_ANSWER_TIME))
            this.$router.replace("/quiz");
          else this.$router.replace("/rank");
        } else {
          this.$message({ type: "error", message: data.msg });
        }
      });
    },
    showPromptBox(msg) {
      if (msg === "") return;
      this.promptMessage = msg;
      this.showPrompt = true;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.showPrompt = false;
      }, 2500);
    },
    ...mapMutations({
      setUserInfo: SET_USER_INFO,
      getUserInfo: GET_USER_INFO,
    }),
  },
  computed: {
    ...mapState([
      "username",
      "userMobile",
      "userTeamId",
      "userId",
      "token",
      "READING_TIME",
      "START_ANSWER_TIME",
      "END_ANSWER_TIME",
    ]),
  },
  watch: {},
  components: {
    User,
    Phone,
    Trophy,
    PromptBox,
    PreloadImage,
  },
  created() {
    // getWXUserInfo().then(({ data }) => {
    //   this.setUserInfo(data);
    // });
    getTeamInfo().then(({ data }) => {
      this.options = data.page ? data.page.list : null;
    });
  },
  mounted() {
    this.getUserInfo();
    this.$nextTick(() => {
      this.name = this.username;
      this.mobile = this.userMobile;
      this.team = this.userTeamId;
    });
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.main {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/bg.jpeg") no-repeat center center;
  background-size: cover;
  position: relative;
  .title {
    display: flex;
    font-weight: bold;
    font-size: 46px;
    font-family: Simsun;
    margin: 50px 4px;
    align-items: center;
    justify-content: center;
    color: whitesmoke;
    svg {
      color: #fbc051;
      width: 50px;
      margin-right: 10px;
    }
  }
  // 音乐按钮
  .music {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 16px;
    right: 10px;
  }
  // 头部按钮
  .head-btn {
    position: absolute;
    top: 24vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: none;
    border-radius: 12px;
    padding: 4px 10px;
    height: 24px;
    font-size: 12px;
    outline: none;
  }
  .rank-list {
    left: 30%;
    background-color: #f9d74a;
    .icon {
      width: 6px;
      height: 16px;
      margin-top: -1px;
    }
  }
  .invite-code {
    right: 25%;
    background-color: #e5f0fa;
  }
  // 信息栏
  .info-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 10%;
    width: 100%;
    margin: 0 auto;
    .content {
      // height: calc(100vh - 100px);
      overflow: auto;
      .el-input {
        display: block;
        width: 180px;
        margin: 22px auto;
      }
      .el-select {
        display: block;
        width: 180px;
        margin: 22px auto;
      }
      .el-button {
        display: block;
        width: 180px;
        margin: 22px auto;
      }
    }
    // background-color: rgba(255, 255, 255, 0.603);
    // border-radius: 8px;
    // box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    // 头像
    .avatar {
      margin: 16px 0 2px;
      width: 48px;
      height: 48px;
      border-radius: 24px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    }
    // 剩余游戏次数和奖金
    .text-info {
      width: 80%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      .title {
        font-size: 12px;
        color: #333;
      }
      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 16px;
        line-height: 16px;
        .icon {
          margin-top: -1px;
          width: 6px;
          height: 16px;
        }
      }
      div:nth-child(2) {
        width: 1px;
        height: 1em;
        background-color: #eee;
      }
      a {
        text-decoration: none;
        color: #000;
      }
    }
    // 普通模式按钮
    .normal-btn {
      .begin {
        width: 16px;
        height: 16px;
        margin-right: 16px;
      }
    }
    // 练习模式按钮
    .practice-btn {
      .text {
        font-size: 12px;
      }
    }
    // 限时答题按钮
    .activity-btn {
      /deep/ .border {
        width: 90%;
        padding: 0 5%;
        justify-content: space-around;
        color: #eee;
      }
      .activity-img {
        height: 100%;
      }
      .activity-intro {
        display: flex;
        flex-direction: column;
        line-height: 15px;
        font-size: 0.7em;
      }
    }
    // 限时答题活动预告
    .trailer {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      /*justify-content: center;*/
      .title {
        font-size: 12px;
        color: #444;
      }
      .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        div {
          margin: 0 16px;
          width: 1px;
          height: 16px;
          background-color: #eee;
        }
        p {
          margin: 10px 0;
        }
      }
    }
    // 分割线
    .divider {
      position: absolute;
      bottom: 32px;
      width: 88%;
      height: 1px;
      background-color: #eee;
    }
    // 滚动消息
    .message {
      position: absolute;
      bottom: 0;
      height: 32px;
      font-size: 12px;
    }
    .attention {
      margin: auto;
      padding: 5px;
      border-radius: 2px;
      text-align: center;
      font-weight: bold;
      font-size: 11px;
      background-color: #d32f2f;
      color: #fbc051;
    }
  }
  // 游戏规则
  .help {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3vh;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    .help-icon {
      height: 14px;
      margin-top: -1px;
    }
    a {
      color: #fff;
    }
  }
}
// 模糊
.blur {
  filter: blur(4px);
  .mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }
}
</style>
